<template>
  <div class="live-detail clearfix">
    <AdvertBar class="ad-bar"></AdvertBar>
    <div class="live-detail-left">
      <img :src="detail.logo" alt="">
      <div class="border-title">直播介绍</div>
      <div class="desc" v-html="detail.introduce"></div>
    </div>
    <div class="live-detail-right">
      <div class="form">
        <p><span>高校名称</span>：<span>{{detail.schoolName}}</span></p>
        <p><span style="letter-spacing: 5px;">主讲人</span>：<span>{{detail.explainer}}</span></p>
        <p v-if="!noDate"><span>直播时间</span>：<span>{{detail.openTime | formatDate}}{{detail.startTime}}--{{detail.endTime}}</span>
        </p>
        <p v-else><span>直播时间</span>：<span>直播时间待定</span></p>
        <p>
          <input v-model="liveCode" type="text" placeholder="输入直播号">
        </p>
        <p>
          <button style="cursor: not-allowed" v-if="detail.status === '0'">敬请期待</button>
          <button v-if="detail.status === '1'" @click="checkLiveCode">观看直播</button>
          <button v-if="detail.status === '2'" @click="checkLiveCode">观看回放</button>
        </p>
        <div class="tips">温馨提示：关注以下公众号获取直播号</div>
        <p style="text-align: center">
          <img src="/images/qr_code.png" alt="">
        </p>
      </div>
    </div>
  </div>
</template>

<script>
  import AdvertBar from '../../components/AdvertBar'
  export default {
    name: 'LiveDetail',
    components: {
      AdvertBar
    },
    data() {
      return {
        id: '',
        detail: {},
        liveCode: '',
        noDate: false
      }
    },
    mounted() {
      const noDateList = [11, 12, 15, 13]
      this.id = this.$route.query.id
      this.title = this.$route.query.title
      this.noDate = noDateList.includes(this.id)
      this.getDetail()
    },
    methods: {
      checkLiveCode() {
        const id = this.id
        const no = this.liveCode
        const title = this.title
        this.$http.get('/liveVideoController/checkVideoNo', {
          id,
          no
        })
          .then(value => {
            if (value.state === 2) {
              window.open(`#/videoPlay?title=${title}&videoUrl=${value.backUrl}`)
            } else if (value.status === 2002) {
              this.$message.error(value.info)
            } else {
              window.open(value.url)
            }
          })
      },
      getDetail() {
        this.$http.get('/liveVideoController/getVideoDetail', {id: this.id})
          .then(value => {
            // endTime (string, optional): 结束时间 ,
            // explainer (string, optional): 主讲人 ,
            // id (integer, optional): 主键 ,
            // introduce (string, optional): 直播介绍 ,
            // liveNo (string, optional): 直播号 ,
            // logo (string, optional): 图片 ,
            // loopImg (string, optional): 轮播图 ,
            // mdTime (string, optional): 日期 月日 ,
            // openTime (string, optional): 日期 全日期格式 ,
            // schoolId (string, optional): 学校主键 ,
            // schoolName (string, optional): 学校名称 ,
            // startTime (string, optional): 开始时间 ,
            // title (string, optional): 直播标题
            this.detail = value
          })
      }
    }
  }
</script>

<style scoped lang="less">
  .live-detail {
    margin-top: 22px;

    .ad-bar {
      margin-bottom: 30px;
    }
  }

  .live-detail-left {
    width: 454px;
    float: left;

    img {
      width: 100%;
      height: 254px;
      object-fit: cover;
    }

    .border-title {
      font-size: 22px;
      color: #1F2329;
      margin-bottom: 12px;
      margin-top: 37px;
    }

    .desc {
      color: #1F2329;
      line-height: 26px;
    }
  }

  .live-detail-right {
    width: 395px;
    padding: 20px;
    float: left;
    margin-left: 60px;
    border: 1px solid #EFF0F1;
    border-radius: 4px;

    .form {
      p {
        margin-top: 24px;
        color: #9CA2A9;
      }

      .right-title {
        height: 20px;
        line-height: 20px;
        display: inline-block;
        width: 80px;
        text-align: justify;

        &::after {
          display: inline-block;
          width: 100%;
          content: '';
          height: 0;
        }
      }

      span {
        color: #1F2329;
      }

      input {
        width: 100%;
        height: 40px;
        color: #1F2329;
        text-indent: 10px;
        border: 1px solid #EFF0F1;
        border-radius: 4px;

        &::-webkit-input-placeholder {
          color: #9CA2A9;
        }

        &:focus, select:focus {
          border: 1px solid #FF6B51;
          outline: none;
        }
      }

      button {
        width: 100%;
        height: 40px;
        background: #FF6B51;
        border-radius: 4px;
        color: #fff;
        box-shadow: none;
        border: 0;
        font-size: 16px;

        &:focus, &:hover {
          background-color: rgba(255, 107, 81, 0.77);
        }
      }
    }

    .tips {
      font-size: 15px;
      color: #9CA2A9;
      margin-top: 40px;
    }
  }
</style>
